<template>
  <div class="page-container out-container">
    <el-row :gutter="8">
      <el-col :span="4">
        <companyTree
          :loading="loading"
          :treeData="treeData"
          :title="'公司信息'"
          @node-click="nodeClick($event)"
        ></companyTree>
      </el-col>
      <el-col :span="20">
        <div class="in-container container">
          <AppSearchForm @submit="search" @reset="reset">
            <el-form-item>
              <el-input
                v-model="query.title"
                clearable
                placeholder="请输入关键字"
              >
              </el-input>
            </el-form-item>
          </AppSearchForm>
          <div class="btn-box">
            <el-button type="primary" @click="openNew">新增</el-button>
          </div>
          <el-table
            v-loading="tableData.option.loading"
            border
            row-key="id"
            ref="tableRef"
            class="table"
            header-row-class-name="tableHeader"
            :data="tableData.data"
          >
            <el-table-column prop="name" label="名称" />
            <el-table-column  label="所属公司" >
              <template #default="scope">
                {{ scope.row.company.name }}
              </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序">
              <template #default="scope">
                {{ scope.row.sort }}
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建日期">
              <template #default="scope">
                {{ parseTime(scope.row.createTime) }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="130px">
              <template #default="scope">
                <el-button @click="updateJob(scope.row)" type="primary"
                  >编辑</el-button
                >
                <el-popconfirm
                  title="确定删除本条数据吗？"
                  @confirm="deleteJob(scope.row)"
                >
                  <template #reference>
                    <el-button type="danger">删除</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <jobFormDialog
            ref="dialog"
            :company-data="treeData"
            v-model:model-data="formData"
            v-model:dialog-data="dialogData"
            @submit="submit"
            @cancel="cancel"
          >
          </jobFormDialog>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import dayjs from "dayjs";
import AppSearchForm from "@/components/AppSearchForm.vue";
import companyTree from "./components/companyTree.vue";
import jobFormDialog from "./components/jobFormDialog.vue";
import { useTableOption } from "@/components/AppPageTable2";
export default defineComponent({
  components: {
    companyTree,
    AppSearchForm,
    jobFormDialog,
  },
  data() {
    return {
      loading: false,
      treeData: [],
      query: {
        title: "",
      },
      tableData: {
        data: [],
        option: useTableOption(),
      },
      dialogData: {
        show: false,
        title: "",
        btnLoading: false,
      },
      formData: {
        id: 0,
        name: "",
        companyId: "",
        sort: 1,
        enabled: true,
      },
      //点击后公司id
      companyId: "",
    };
  },
  methods: {
    parseTime(date) {
      if (date) {
        return dayjs(date).format("YYYY-MM-DD");
      }
      return date;
    },
    initCompanyTree() {
      this.loading = true;
      this.$http
        .get("/api/company/buildTree", {
          KeyWords: "",
        })
        .then((res) => {
          this.treeData = res;
        })
        .finally(() => (this.loading = false));
    },
    search() {
      this.getTableData();
    },
    reset() {
      this.query = {
        title: "",
      };
      this.getTableData();
    },
    openNew() {
      this.dialogData.show = true;
      this.dialogData.title = "新增岗位";
    },
    getTableData() {
      this.tableData.option.loading = true;
      this.$http
        .get("/api/job/query", {
          JobName: this.query.title,
          CompanyId: this.companyId,
        })
        .then((res) => {
          this.tableData.data = res;
        })
        .finally(() => (this.tableData.option.loading = false));
    },
    nodeClick(node) {
      this.companyId = node.id;
      this.getTableData();
    },
    submit() {
      let url = "";
      if (this.formData.id) {
        url = "/api/job/edit";
      } else {
        url = "/api/job/create";
      }
      this.$refs.dialog.$refs.form.validate((valid) => {
        if (valid) {
          this.dialogData.btnLoading = true;
          this.$http
            .post(url, this.formData)
            .then((res) => {
              if (res.status) {
                this.companyId = this.formData.companyId;
                this.getTableData();
                this.$message.success(res.message);
                this.dialogData.show = false;
              } else {
                this.$message.error(res.message);
              }
            })
            .finally(() => (this.dialogData.btnLoading = false));
        }
      });
    },
    cancel() {
      this.dialogData.show = false;
    },
    updateJob(row) {
      this.dialogData.title = "修改岗位";
      this.dialogData.show = true;
      if (row.parentId == "0") {
        row.parentId = "";
      }
      this.$nextTick(() => {
        this.formData = JSON.parse(JSON.stringify(row));
      });
    },
    deleteJob(row) {
      this.$http
        .post("/api/job/delete", {
          idArray: [row.id],
        })
        .then((res) => {
          if (res.status) {
            this.getTableData();
            this.$message.success(res.message);
          } else {
            this.$message.error(res.message);
          }
        });
    },
  },
  watch: {
    "dialogData.show"(newVal) {
      if (!newVal) {
        this.$nextTick(() => {
          this.formData.id = "";
          this.$refs["dialog"].$refs["form"].resetFields();
        });
      }
    },
  },
  mounted() {
    this.initCompanyTree();
    this.getTableData()
  },
});
</script>

<style lang="scss" scoped>
.out-container {
  background: #fff;
  :deep(.el-row) {
    height: 100%;
  }
  .container {
    display: flex;
    flex-direction: column;
    .btn-box {
      margin-bottom: 8px;
    }
    .table {
      flex: 1;
      :deep(.tableHeader) th {
        background-color: #f7f8fa !important;
      }
    }
    .page-component {
      justify-content: flex-end;
      margin-top: 10px;
    }
  }
}
</style>
